<template>
    <div style="height: 100%; overflow: hidden">
        <div class="container container2" v-if="pageData.biaoji == 0" style="flex-wrap: wrap;">
            <div class="main-container">
                <div style="width: 28%" class="container-one" :style="{ height: ribaobiaoji + 'px' }" v-if="(permissionStore.hasPermisson('zcbbrb.jtztb') ||
            permissionStore.hasPermisson('zcbbrb.jtcldtb') ||
            permissionStore.hasPermisson('zcbbrb.ddclmxb') ||
            permissionStore.hasPermisson('zcbbrb.zccl') ||
            permissionStore.hasPermisson('zcbbrb.bzlccl') ||
            permissionStore.hasPermisson('zcbbrb.yjktl') ||
            permissionStore.hasPermisson('zcbbrb.jtxl'))">
                    <table class="tableClass">
                        <tr>
                            <td style="width: 15%">
                                <div style="height: 40%; width: 6px; background-color: #018eed"></div>
                            </td>
                            <td style="width: 70%; border-bottom: 1px solid #f4f5f8">日报
                                <img @click="shousuo('日报')" src="../../../src/assets/shouqi.ico"
                                    style="width: 20px; height: 20px; float: right"
                                    :style="{ transform: ribao ? 'rotate(-90deg)' : 'rotate(90deg)' }" alt="" />
                            </td>
                            <td style="width: 15%"></td>
                        </tr>
                    </table>
                    <div style="overflow: auto;width: 100%; height: 250px;" v-if="ribao">
                        <div v-if="permissionStore.hasPermisson('zcbbrb.jtztb')" class="IconFont" @click="jinru('10')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-jitaizhuangtaibiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            机台状态表
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbrb.jtcldtb')" class="IconFont" @click="jinru('11')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/MachineMoving.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-jitaichanliangdongtaibiao" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            机台产量动态表
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbrb.ddclmxb')" class="IconFont" @click="jinru('12')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/OrderDetail.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-dingdanchanliangmingxibiao" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            <label>订单产量明细表</label>
                        </div>
                        <div class="IconFont" @click="jinru('38')" style="text-align: center; cursor: pointer"
                            :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/OrderDetail.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-dingdanchanliangmingxibiao" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            <label>织厂生产日报表</label>
                        </div>
                        <!-- <div v-if="permissionStore.hasPermisson('zcbbrb.zccl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('19')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-zhichangchanliang" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            织厂产量
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbrb.bzlccl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('20')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-banzuloucengchanliang" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            班组楼层产量
                        </div> -->
                    </div>
                </div>
                <div style="width: 27%" class="container-one" :style="{ height: pandianbiaoji + 'px' }">
                    <table class="tableClass">
                        <tr>
                            <td style="width: 20%">
                                <div style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"></div>
                            </td>
                            <td style="width: 60%; border-bottom: 1px solid #f4f5f8">盘点
                                <img @click="shousuo('盘点')" src="../../../src/assets/shouqi.ico"
                                    style="width: 20px; height: 20px; float: right"
                                    :style="{ transform: pandian == true ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                                    alt="" />
                            </td>
                            <td style="width: 20%"></td>
                        </tr>
                    </table>
                    <div style="width: 100%; height: 120px; " v-if="pandian">
                        <div style="justify-content: space-around">
                            <!-- <div  @click="jinru('9')" style="text-align:center;cursor:pointer;" :span="24">
                         <div style="width:80%;height:70px;margin:0px auto;">
                              <img src="../../assets/YuliaoPan.png" style="width:60px;height:60px" alt="">
                           </div>
                        余料盘点结存表
                      </div> -->
                        </div>
                    </div>
                </div>
                <div style="width: 40%" class="container-one" :style="{ height: jincunxiaobiaoji + 'px' }" v-if="(permissionStore.hasPermisson('zcbbjxc.ycljxc') ||
            permissionStore.hasPermisson('zcbbjxc.ylyjb') ||
            permissionStore.hasPermisson('zcbbjxc.pbrjb') ||
            permissionStore.hasPermisson('zcbbjxc.pbyjb') ||
            permissionStore.hasPermisson('zcbbjxc.cpcybb') ||
            permissionStore.hasPermisson('zcbbjxc.wjcybb') ||
            permissionStore.hasPermisson('zcbbjxc.cbcbb') ||
            permissionStore.hasPermisson('zcbbjxc.zcwip'))
            ">
                    <table class="tableClass">
                        <tr>
                            <td style="width: 5%">
                                <div style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"></div>
                            </td>
                            <td style="width: 90%; border-bottom: 1px solid #f4f5f8">进存销
                                <!-- <icon-download @click="shousuo('进存销')" style="color:#018EED;font-size:20px;float:right" /> -->
                                <img @click="shousuo('进存销')" src="../../../src/assets/shouqi.ico"
                                    style="width: 20px; height: 20px; float: right"
                                    :style="{ transform: jincunxiao == true ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                                    alt="" />
                            </td>
                            <td style="width: 5%"></td>
                        </tr>
                    </table>

                    <div style="width: 100%; height: 120px; " v-if="jincunxiao">

                        <div v-if="permissionStore.hasPermisson('zcbbjxc.ylyjb')" class="IconFont" @click="jinru('2')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/YuYuejie.png" style="width:60px;height:60px" alt=""> -->
                                <!-- <img src="../../assets/YuYuejie.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-yuliaoyuejiebiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            余料月结表
                        </div>
                        <!-- <div @click="jinru('3')" style="text-align:center;cursor:pointer;" :span="6">
                       <div style="width:80%;height:70px;margin:0px auto;">
                         <img src="../../assets/YuliaoTong.png" style="width:60px;height:60px" alt="">
                       </div>
                    余料统计表
                  </div> -->
                        <div v-if="permissionStore.hasPermisson('zcbbjxc.pbrjb')" class="IconFont" @click="jinru('4')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/Piburi.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-piburijiebiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            坯布日结表
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbjxc.pbyjb')" class="IconFont" @click="jinru('8')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/Pibuyue.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-pibuyuejiebiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            坯布月结表
                        </div>
                        <!-- <div v-if="permissionStore.hasPermisson('zcbbjxc.cpcybb')" class="IconFont" @click="jinru('5')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <img src="../../assets/ChengpingCang.png" style="width:60px;height:60px" alt="">
                                <IconFont type="icon-chengpincangyuebaobiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            成品仓月报表
                        </div> -->
                        <div v-if="permissionStore.hasPermisson('zcbbjxc.wjcybb')" class="IconFont" @click="jinru('6')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/WujinCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-wujincangbaobiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            五金进销存
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbjxc.cbcbb')" class="IconFont" @click="jinru('7')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-cibucangyuebaobiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            次布仓报表
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbjxc.zcwip')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('17')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-zhichangWIP" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            织厂WIP
                        </div>
                    </div>
                </div>
            </div>

            <div class="main-container2">
                <div style="width: 44%" class="container-two" :style="{ height: QCbiaoji + 'px' }" v-if="(permissionStore.hasPermisson('zcbbqc.cbl/jdljb') ||
            permissionStore.hasPermisson('zcbbqc.csxsjxxl'))">
                    <table class="tableClass">
                        <tr>
                            <td style="width: 5%">
                                <div style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"></div>
                            </td>
                            <td style="width: 90%; border-bottom: 1px solid #f4f5f8">QC
                                <img @click="shousuo('QC')" src="../../../src/assets/shouqi.ico"
                                    style="width: 20px; height: 20px; float: right"
                                    :style="{ transform: QC == true ? 'rotate(-90deg)' : 'rotate(90deg)' }" alt="" />
                            </td>
                            <td style="width: 5%"></td>
                        </tr>
                    </table>
                    <!-- <div style="width: 100%; height: 120px; " v-if="QC">
                        <div v-if="permissionStore.hasPermisson('zcbbqc.cbl/jdljb')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('15')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-cibushuai-jiangdengshuaijibiao" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            疵布率/降等率计表
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbqc.csxsjxxl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('16')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-chaishaxieshajixiuxiaoshuai" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            拆纱卸纱机修效率
                        </div>
                    </div> -->
                </div>
                <div style="width: 53%" class="container-two" :style="{ height: yewubiaoji + 'px' }" v-if="(permissionStore.hasPermisson('zcbbyw.dddtb') ||
            permissionStore.hasPermisson('zcbbyw.scjdcx') ||
            permissionStore.hasPermisson('zcbbyw.ddzjl'))">
                    <table class="tableClass">
                        <tr>
                            <td style="width: 5%">
                                <div style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"></div>
                            </td>
                            <td style="width: 90%; border-bottom: 1px solid #f4f5f8">业务
                                <img @click="shousuo('业务')" src="../../../src/assets/shouqi.ico"
                                    style="width: 20px; height: 20px; float: right"
                                    :style="{ transform: yewu == true ? 'rotate(-90deg)' : 'rotate(90deg)' }" alt="" />
                            </td>
                            <td style="width: 5%"></td>
                        </tr>
                    </table>
                    <div style="width: 100%; height: 120px; " v-if="yewu">
                        <div v-if="permissionStore.hasPermisson('zcbbyw.dddtb')" class="IconFont" @click="jinru('13')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/OrderMoving.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-dingdandongtaibiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            订单动态表
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbyw.scjdcx')" class="IconFont" @click="jinru('14')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/Productprocess.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-shengchanjinduchaxun" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            生产进度查询
                        </div>
                        <!-- <div v-if="permissionStore.hasPermisson('zcbbyw.ddzjl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('18')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-dingdanzhunjiaoshuai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            订单准交率
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="main-container3">
                <div style="width: 100%" class="container-s" :style="{ height: 320 + 'px' }">
                    <table class="tableClass">
                        <tr>
                            <td style="width: 3%;">
                                <div style="height: 40%; width: 6px; background-color: #018eed"></div>
                            </td>
                            <td style="width: 85%; border-bottom: 1px solid #f4f5f8">BI
                                <img @click="shousuo('BI')" src="../../../src/assets/shouqi.ico"
                                    style="width: 20px; height: 20px; float: right"
                                    :style="{ transform: Bibao ? 'rotate(-90deg)' : 'rotate(90deg)' }" alt="" />
                            </td>
                            <td style="width: 12%"></td>
                        </tr>
                    </table>
                    <div style="overflow: auto;width: 100%;position: relative;top: 15px;display: flex;" v-if="Bibao">
                        <div v-if="permissionStore.hasPermisson('zcbbjxc.ycljxc')" class="IconFont"
                            style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/Rawmaterialstorage/Rawmaterialstorage')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-yuancailiaojinxiaocun" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            原材料进销存
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-jitaixiaoshuai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            机台效率
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index2')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            圆机开台率
                        </div>

                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index5')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-dingdanzhunjiaoshuai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            订单准交率
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index6')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-cibushuai-jiangdengshuaijibiao" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            疵布率/降等率
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index7')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-zhichangWIP" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            历史WIP
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index8')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-zhichangWIP" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            实时WIP
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index9')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-chaishaxieshajixiuxiaoshuai" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            拆纱卸纱机修效率
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index10')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-chaishaxieshajixiuxiaoshuai" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            库存
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index11')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-zhichangchanliang" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            织厂产量
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index12')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-banzuloucengchanliang" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            班组楼层产量
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index13')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-banzuloucengchanliang" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            外加工坯布库存
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index14')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            圆机状态
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index15')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            吨布漏验次数
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index16')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            产值工资率
                        </div>
                        <div class="IconFont" style="text-align: center; cursor: pointer"
                            @click="onClickRouter('/BIbaobiao/index17')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            吨布五金
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 原料进存销 -->
        <div v-if="pageData.biaoji == 1" style="height: 100%; width: 100%">
            <Rawmaterialstorage :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></Rawmaterialstorage>
        </div>
        <!-- 余料月结表 -->
        <div v-if="pageData.biaoji == 2" style="height: 100%; width: 100%">
            <SurplusMaterialmonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </SurplusMaterialmonth>
        </div>
        <!-- 坯布日结表 -->
        <div v-if="pageData.biaoji == 4" style="height: 100%; width: 100%">
            <GreyDay :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></GreyDay>
        </div>
        <!-- 成品仓月报表 -->
        <div v-if="pageData.biaoji == 5" style="height: 100%; width: 100%">
            <FinishedWarehouseMonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </FinishedWarehouseMonth>
        </div>
        <!-- 五金仓月报表 -->
        <div v-if="pageData.biaoji == 6" style="height: 100%; width: 100%">
            <HardwareWarehouseMonthReport :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </HardwareWarehouseMonthReport>
        </div>
        <!-- 次布仓报表 -->
        <div v-if="pageData.biaoji == 7" style="height: 100%; width: 100%">
            <SecondaryGreymonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></SecondaryGreymonth>
        </div>
        <!-- 坯布月结表 -->
        <div v-if="pageData.biaoji == 8" style="height: 100%; width: 100%">
            <Greyclothmonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></Greyclothmonth>
        </div>
        <!-- 机台状态表 -->
        <div v-if="pageData.biaoji == 10" style="height: 100%; width: 100%">
            <MachineCondition :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></MachineCondition>
        </div>
        <!-- 机台产量动态表 -->
        <div v-if="pageData.biaoji == 11" style="height: 100%; width: 100%">
            <MachineProductCondition :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </MachineProductCondition>
        </div>
        <!-- 订单产量明细表 -->
        <div v-if="pageData.biaoji == 12" style="height: 100%; width: 100%">
            <PlanOrderOutputDetail :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </PlanOrderOutputDetail>
        </div>
        <!-- 订单动态表 -->
        <div v-if="pageData.biaoji == 13" style="height: 100%; width: 100%">
            <PlanOrderInfo :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></PlanOrderInfo>
        </div>
        <!-- 生产进度查询 -->
        <div v-if="pageData.biaoji == 14" style="height: 100%; width: 100%">
            <ProductionInfo :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></ProductionInfo>
        </div>
        <!--  疵布率/降等率计表   -->
        <div v-if="pageData.biaoji == 15" style="height: 100%; width: 100%">
            <MeterOfClothRateDrop :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </MeterOfClothRateDrop>
        </div>
        <!-- 拆纱卸纱机修效率   -->
        <div v-if="pageData.biaoji == 16" style="height: 100%; width: 100%">
            <DismantlingMachineRepairEfficiency :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </DismantlingMachineRepairEfficiency>
        </div>
        <!-- 织厂WIP   -->
        <div v-if="pageData.biaoji == 17" style="height: 100%; width: 100%">
            <WeavingFactoryWIP :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></WeavingFactoryWIP>
        </div>
        <!-- 订单准交率   -->
        <div v-if="pageData.biaoji == 18" style="height: 100%; width: 100%">
            <OrderDeliveryRate :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></OrderDeliveryRate>
        </div>
        <!-- 织厂产量   -->
        <div v-if="pageData.biaoji == 19" style="height: 100%; width: 100%">
            <TextileOutput :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></TextileOutput>
        </div>
        <!-- 班组楼层产量   -->
        <div v-if="pageData.biaoji == 20" style="height: 100%; width: 100%">
            <TeamFloorOutput :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></TeamFloorOutput>
        </div>
        <!-- 圆机开台率   -->
        <div v-if="pageData.biaoji == 21" style="height: 100%; width: 100%">
            <OpeningRateOfRoundMachine :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
            </OpeningRateOfRoundMachine>
        </div>
        <!-- 机台效率   -->
        <div v-if="pageData.biaoji == 22" style="height: 100%; width: 100%">
            <MachineEfficiency :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></MachineEfficiency>
        </div>
        <!-- 厂部在岗率   -->
        <div v-if="pageData.biaoji == 23" style="height: 100%; width: 100%">
            <createFrimsDfates :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createFrimsDfates>
        </div>
        <!-- 厂部人员流失率   -->
        <div v-if="pageData.biaoji == 24" style="height: 100%; width: 100%">
            <createFrimsPosyYusbn :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createFrimsPosyYusbn>
        </div>
        <!-- 订单准交率   -->
        <div v-if="pageData.biaoji == 25" style="height: 100%; width: 100%">
            <createFrimsPosyWsouty :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createFrimsPosyWsouty>
        </div>
        <!-- 疵布率/降等率   -->
        <div v-if="pageData.biaoji == 26" style="height: 100%; width: 100%">
            <createFrimsPosyMacPro :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createFrimsPosyMacPro>
        </div>
        <!-- 历史记录每天WIP   -->
        <div v-if="pageData.biaoji == 27" style="height: 100%; width: 100%">
            <createFrimsWipJusty :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createFrimsWipJusty>
        </div>
        <!-- 实时WIP   -->
        <div v-if="pageData.biaoji == 28" style="height: 100%; width: 100%">
            <createWipSstions :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createWipSstions>
        </div>
        <!-- 拆纱卸纱机修效率   -->
        <div v-if="pageData.biaoji == 29" style="height: 100%; width: 100%">
            <createXioptions :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createXioptions>
        </div>
        <!-- 库存   -->
        <div v-if="pageData.biaoji == 30" style="height: 100%; width: 100%">
            <createWms :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createWms>
        </div>
        <!-- 织厂产量   -->
        <div v-if="pageData.biaoji == 31" style="height: 100%; width: 100%">
            <createMesCl :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createMesCl>
        </div>
        <!-- 班组楼层产量   -->
        <div v-if="pageData.biaoji == 32" style="height: 100%; width: 100%">
            <createMesLcCl :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createMesLcCl>
        </div>
        <!-- 外加工坯布库存   -->
        <div v-if="pageData.biaoji == 33" style="height: 100%; width: 100%">
            <createWfrimKc :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createWfrimKc>
        </div>
        <!-- 圆机状态   -->
        <div v-if="pageData.biaoji == 34" style="height: 100%; width: 100%">
            <createOubhgOb :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createOubhgOb>
        </div>
        <!-- 吨布漏验次数   -->
        <div v-if="pageData.biaoji == 35" style="height: 100%; width: 100%">
            <createLouYan :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createLouYan>
        </div>
        <!-- 产值工资率   -->
        <div v-if="pageData.biaoji == 36" style="height: 100%; width: 100%">
            <createCrinFrimMonly :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createCrinFrimMonly>
        </div>
        <!-- 吨布五金   -->
        <div v-if="pageData.biaoji == 37" style="height: 100%; width: 100%">
            <createDunBou :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createDunBou>
        </div>
        <!-- 织厂生产日报表   -->
        <div v-if="pageData.biaoji == 38" style="height: 100%; width: 100%">
            <zcscr :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </zcscr>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import emitter from '@/hooks/useEventBus'
import MachineCondition from '@/components/product/BIReport/MachineCondition.vue'
import MachineProductCondition from '@/components/product/BIReport/MachineProductCondition.vue'
import PlanOrderOutputDetail from '@/components/product/BIReport/PlanOrderOutputDetail.vue'
import PlanOrderInfo from '@/components/product/BIReport/PlanOrderInfo.vue'
import ProductionInfo from '@/components/product/BIReport/ProductionInfo.vue'
import Rawmaterialstorage from '@/components/product/BIReport/Rawmaterialstorage.vue'
import FinishedWarehouseMonth from '@/components/product/BIReport/FinishedWarehouseMonth.vue'
import HardwareWarehouseMonthReport from '@/components/product/BIReport/HardwareWarehouseMonthReport.vue'
import SurplusMaterialmonth from '@/components/product/BIReport/SurplusMaterialmonth.vue'
import Greyclothmonth from '@/components/product/BIReport/Greyclothmonth.vue'
import SecondaryGreymonth from '@/components/product/BIReport/SecondaryGreymonth.vue'
import GreyDay from '@/components/product/BIReport/GreyDay.vue'
import MeterOfClothRateDrop from '@/components/MeterOfClothRateDrop/index.vue'
import DismantlingMachineRepairEfficiency from '@/components/DismantlingMachineRepairEfficiency/index.vue'
import WeavingFactoryWIP from '@/components/WeavingFactoryWIP/index.vue'
import OrderDeliveryRate from '@/components/OrderDeliveryRate/index.vue'
import TextileOutput from '@/components/TextileOutput/index.vue'
import TeamFloorOutput from '@/components/TeamFloorOutput/index.vue'
import OpeningRateOfRoundMachine from '@/components/TeamFloorOutput/index2.vue'
import createFrimsDfates from '@/components/TeamFloorOutput/index3.vue'
import createFrimsPosyYusbn from '@/components/TeamFloorOutput/index4.vue'
import createFrimsPosyWsouty from '@/components/TeamFloorOutput/index5.vue'
import createFrimsPosyMacPro from '@/components/TeamFloorOutput/index6.vue'
import createFrimsWipJusty from '@/components/TeamFloorOutput/index7.vue'
import createWipSstions from '@/components/TeamFloorOutput/index8.vue'
import createXioptions from '@/components/TeamFloorOutput/index9.vue'
import createWms from '@/components/TeamFloorOutput/index10.vue'
import createMesCl from '@/components/TeamFloorOutput/index11.vue'
import createMesLcCl from '@/components/TeamFloorOutput/index12.vue'
import createWfrimKc from '@/components/TeamFloorOutput/index13.vue'
import createOubhgOb from '@/components/TeamFloorOutput/index14.vue'
import createLouYan from '@/components/TeamFloorOutput/index15.vue'
import createCrinFrimMonly from '@/components/TeamFloorOutput/index16.vue'
import createDunBou from '@/components/TeamFloorOutput/index17.vue'
import MachineEfficiency from '@/components/TeamFloorOutput/index.vue'
import zcscr from '../../views/product/components/zcscr.vue'
// import hightChartsGantt from '../hightChartsGantt/index.vue'
import { useRoute } from 'vue-router'

import { useRouter } from 'vue-router'
import usePermission from "@/store/modules/permission";

export default defineComponent({
    name: 'BIReport',
    components: {
        MachineCondition,
        MachineProductCondition,
        PlanOrderOutputDetail,
        PlanOrderInfo,
        ProductionInfo,
        Rawmaterialstorage,
        FinishedWarehouseMonth,
        HardwareWarehouseMonthReport,
        SurplusMaterialmonth,
        Greyclothmonth,
        SecondaryGreymonth,
        GreyDay,
        MeterOfClothRateDrop,
        DismantlingMachineRepairEfficiency,
        WeavingFactoryWIP,
        OrderDeliveryRate,
        TextileOutput,
        TeamFloorOutput,
        OpeningRateOfRoundMachine,
        MachineEfficiency,
        createFrimsDfates,
        createFrimsPosyYusbn,
        createFrimsPosyWsouty,
        createFrimsPosyMacPro,
        createFrimsWipJusty,
        createWipSstions,
        createXioptions,
        createWms,
        createMesCl,
        createMesLcCl,
        createWfrimKc,
        createOubhgOb,
        createLouYan,
        createCrinFrimMonly,
        createDunBou,
        zcscr
        // hightChartsGantt
    },
    setup() {

        const jinru = (event: any) => {
            //emitter.emit('window-change')
            pageData.biaoji = event

            //console.log(event)
            //localStorage.setItem("eee222",event)
        }
        const pageData = reactive({
            tableIndex: '1',
            biaoji: 0,
        })
        const route = useRoute()
        if (Number(route.params.id)) {
            pageData.biaoji = route.params.id
        } else {
            pageData.biaoji = 0
        }
        watch(() => route.params, () => {
            if (Number(route.params.id)) {
                pageData.biaoji = route.params.id
            } else {
                pageData.biaoji = 0
            }
        })
        const tabsChange = (e: string | number) => {
            //emitter.emit('window-change')
        }
        const takebiaoji = (item: any) => {
            //localStorage.setItem("wdbiaoji",item)
            // emitter.emit('window-change')
            pageData.biaoji = item
        }
        const shousuo = (val: any) => {
            if (val == '进存销') {
                if (jincunxiaoindex.value == 0) {
                    jincunxiaobiaoji.value = 80
                    jincunxiaoindex.value = 1
                    jincunxiao.value = false
                } else if (jincunxiaoindex.value == 1) {
                    jincunxiao.value = true
                    jincunxiaobiaoji.value = 300
                    jincunxiaoindex.value = 0
                }
            } else if (val == '盘点') {
                if (pandianindex.value == 0) {
                    // pandian.value=false
                    //  jianqu(val);
                    pandian.value = false
                    pandianbiaoji.value = 80
                    pandianindex.value = 1
                } else if (pandianindex.value == 1) {
                    //  shen(val);
                    //    pandian.value=true
                    pandian.value = true
                    pandianbiaoji.value = 300
                    pandianindex.value = 0
                }
            } else if (val == '日报') {
                if (ribaoindex.value == 0) {
                    ribao.value = false
                    //  jianqu(val);
                    ribaobiaoji.value = 80
                    ribaoindex.value = 1
                } else if (ribaoindex.value == 1) {
                    //  shen(val);
                    ribao.value = true
                    ribaobiaoji.value = 300
                    ribaoindex.value = 0
                }
            } else if (val == '业务') {
                if (yewuindex.value == 0) {
                    yewu.value = false
                    //  jianqu(val);
                    yewubiaoji.value = 80

                    yewuindex.value = 1
                } else if (yewuindex.value == 1) {
                    //  shen(val);

                    yewu.value = true
                    yewubiaoji.value = 300
                    yewuindex.value = 0
                }
            } else if (val == 'QC') {
                if (QCindex.value == 0) {
                    QC.value = false
                    //  jianqu(val);
                    QCbiaoji.value = 80
                    QCindex.value = 1
                } else if (QCindex.value == 1) {
                    //  shen(val);
                    QCbiaoji.value = 300
                    QC.value = true
                    QCindex.value = 0
                }
            } else if (val == 'BI') {
                if (Bibaoindex.value == 0) {
                    Bibao.value = false
                    //  jianqu(val);
                    Bibaobiaoji.value = 80
                    Bibaoindex.value = 1
                } else if (Bibaoindex.value == 1) {
                    //  shen(val);
                    Bibao.value = true
                    Bibaobiaoji.value = 200
                    Bibaoindex.value = 0
                }
            }

            //sessionStorage.setItem("nnnn",JSON.stringify(val))
        }
        const router = useRouter()

        let onToCilck = (path: string) => {
            router.push({ path })
        }

        let onClickRouter = (path: string) => {
            router.push({ path })
        }
        //收缩菜单
        const jianqu = (val: any) => {
            if (val == '进存销') {
                jincunxiaobiaoji.value = 300
                var timer1 = setInterval(function () {
                    if (jincunxiaobiaoji.value >= 80) {
                        jincunxiaobiaoji.value = jincunxiaobiaoji.value - 10
                    } else {
                        clearInterval(timer1)
                        return
                    }
                }, 5)
            } else if (val == '盘点') {
                pandianbiaoji.value = 300
                var timer2 = setInterval(function () {
                    if (pandianbiaoji.value >= 80) {
                        pandianbiaoji.value = pandianbiaoji.value - 10
                    } else {
                        clearInterval(timer2)
                        return
                    }
                }, 5)
            } else if (val == '日报') {
                ribaobiaoji.value = 300
                var timer3 = setInterval(function () {
                    if (ribaobiaoji.value >= 80) {
                        ribaobiaoji.value = ribaobiaoji.value - 10
                    } else {
                        clearInterval(timer3)
                        return
                    }
                }, 5)
            } else if (val == '业务') {
                yewubiaoji.value = 300
                var timer4 = setInterval(function () {
                    if (yewubiaoji.value >= 80) {
                        yewubiaoji.value = yewubiaoji.value - 10
                    } else {
                        clearInterval(timer4)
                        return
                    }
                }, 5)
            } else if (val == 'QC') {
                QCbiaoji.value = 300
                var timer5 = setInterval(function () {
                    if (QCbiaoji.value >= 80) {
                        QCbiaoji.value = QCbiaoji.value - 10
                    } else {
                        clearInterval(timer5)
                        return
                    }
                }, 5)
            }
        }
        //伸菜单
        const shen = (val: any) => {
            if (val == '进存销') {
                jincunxiaobiaoji.value = 80
                var timer6 = setInterval(function bb() {
                    if (jincunxiaobiaoji.value <= 300) {
                        jincunxiaobiaoji.value = jincunxiaobiaoji.value + 10
                    } else {
                        clearInterval(timer6)
                        return
                    }
                }, 5)
            } else if (val == '盘点') {
                pandianbiaoji.value = 80
                var timer7 = setInterval(function bb() {
                    if (pandianbiaoji.value <= 300) {
                        pandianbiaoji.value = pandianbiaoji.value + 10
                    } else {
                        clearInterval(timer7)
                        return
                    }
                }, 5)
            } else if (val == '日报') {
                ribaobiaoji.value = 80
                var timer8 = setInterval(function bb() {
                    if (ribaobiaoji.value <= 300) {
                        ribaobiaoji.value = ribaobiaoji.value + 10
                    } else {
                        clearInterval(timer8)
                        return
                    }
                }, 5)
            } else if (val == '业务') {
                yewubiaoji.value = 80
                var timer9 = setInterval(function bb() {
                    if (yewubiaoji.value <= 190) {
                        yewubiaoji.value = yewubiaoji.value + 10
                    } else {
                        clearInterval(timer9)
                        return
                    }
                }, 5)
            } else if (val == 'QC') {
                QCbiaoji.value = 80
                var timer10 = setInterval(function bb() {
                    if (QCbiaoji.value <= 190) {
                        QCbiaoji.value = QCbiaoji.value + 10
                    } else {
                        clearInterval(timer10)
                        return
                    }
                }, 5)
            }
        }
        //进存销菜单伸缩
        const jincunxiaobiaoji = ref(300)
        const jincunxiao = ref(true)
        const jincunxiaoindex = ref(0)
        //盘点菜单伸缩
        const pandianbiaoji = ref(300)
        const pandian = ref(true)
        const pandianindex = ref(0)
        //日报菜单伸缩
        const ribaobiaoji = ref(300)
        const ribao = ref(true)
        const ribaoindex = ref(0)
        //业务菜单伸缩
        const yewubiaoji = ref(300)
        const yewu = ref(true)
        const yewuindex = ref(0)
        //QC菜单伸缩
        const QCbiaoji = ref(300)
        const QC = ref(true)
        const QCindex = ref(0)
        //日报菜单伸缩
        const Bibaobiaoji = ref(200)
        const Bibao = ref(true)
        const Bibaoindex = ref(0)
        const permissionStore = usePermission()
        return {
            onClickRouter,
            pageData,
            tabsChange,
            jinru,
            takebiaoji,
            jincunxiaobiaoji,
            jincunxiao,
            shousuo,
            jincunxiaoindex,
            pandianbiaoji,
            pandian,
            pandianindex,
            ribaobiaoji,
            ribao,
            ribaoindex,
            yewubiaoji,
            yewu,
            yewuindex,
            QCbiaoji,
            QC,
            QCindex,
            onToCilck,
            permissionStore,
            Bibaobiaoji,
            Bibao,
            Bibaoindex
        }
    },
})
</script>
<style scoped>
.container2 {
    height: 100vh;

}

.main-container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    position: relative;
    flex-shrink: 0;
}

.main-container2 {
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    position: relative;
    flex-shrink: 0;
}

.main-container3 {
    margin: 13px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    position: relative;
    background-color: white;
    flex-shrink: 0;
}

.container-one {
    height: 300px;
    background-color: white;
}

.container-two {
    height: 300px;
    background-color: white;
}

.container-s {
    height: 200px;
    background-color: white;
}

.lie:hover {
    background-color: red;
}

@keyframes myfirst {
    from {
        background-color: red;
    }

    to {
        background-color: green;
    }
}

.IconFont:hover {
    transform: scale(1.2);
}

.IconFont {
    display: inline-block;
    margin: 5px 5px;
    min-width: 110px;
}

.tableClass {
    width: 100%;
    height: 50px;
}
</style>